<template>
  <div class="overview">
    <a-page-header
      title="营运管理"
      sub-title="日常营运业务管理中心"
    />
    
    <!-- 营运数据概览 -->
    <a-row :gutter="16" style="margin-bottom: 24px;">
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="今日销售额"
            :value="89567"
            :precision="2"
            suffix="元"
            :value-style="{ color: '#3f8600' }"
          >
            <template #prefix>
              <RiseOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="今日订单数"
            :value="234"
            suffix="单"
            :value-style="{ color: '#1890ff' }"
          >
            <template #prefix>
              <ShoppingOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="活跃促销"
            :value="12"
            suffix="个"
            :value-style="{ color: '#722ed1' }"
          >
            <template #prefix>
              <GiftOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card>
          <a-statistic
            title="客流量"
            :value="1567"
            suffix="人次"
            :value-style="{ color: '#fa8c16' }"
          >
            <template #prefix>
              <UserOutlined />
            </template>
          </a-statistic>
        </a-card>
      </a-col>
    </a-row>

    <!-- 功能模块 -->
    <a-row :gutter="16">
      <a-col :span="6" v-for="item in moduleItems" :key="item.key">
        <a-card hoverable @click="navigateTo(item.path)" class="module-card">
          <template #cover>
            <div class="card-cover">
              <component :is="item.icon" style="font-size: 48px; color: #1890ff;" />
            </div>
          </template>
          <a-card-meta :title="item.title" :description="item.description" />
        </a-card>
      </a-col>
    </a-row>

    <!-- 实时销售数据 -->
    <a-row :gutter="16" style="margin-top: 24px;">
      <a-col :span="12">
        <a-card title="今日销售排行">
          <a-list
            :data-source="topSales"
            item-layout="horizontal"
          >
            <template #renderItem="{ item, index }">
              <a-list-item>
                <template #actions>
                  <span>¥{{ item.amount }}</span>
                </template>
                <a-list-item-meta>
                  <template #avatar>
                    <a-badge :count="index + 1" :number-style="{ backgroundColor: index < 3 ? '#f50' : '#108ee9' }" />
                  </template>
                  <template #title>{{ item.product }}</template>
                  <template #description>销量: {{ item.quantity }}件</template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-col>
      
      <a-col :span="12">
        <a-card title="门店销售对比">
          <a-table
            :columns="storeColumns"
            :data-source="storeData"
            :pagination="false"
            size="small"
          />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  RiseOutlined,
  ShoppingOutlined,
  GiftOutlined,
  UserOutlined,
  BarChartOutlined,
  TagOutlined,
  DollarOutlined,
  FileTextOutlined,
} from '@ant-design/icons-vue'

const router = useRouter()

const moduleItems = ref([
  {
    key: 'sales',
    title: '销售管理',
    description: '销售订单、退换货管理',
    icon: ShoppingOutlined,
    path: '/sales'
  },
  {
    key: 'promotions',
    title: '促销管理',
    description: '促销活动策划和执行',
    icon: GiftOutlined,
    path: '/promotions'
  },
  {
    key: 'pricing',
    title: '价格管理',
    description: '商品定价策略管理',
    icon: DollarOutlined,
    path: '/pricing'
  },
  {
    key: 'reports',
    title: '营运报表',
    description: '营运数据分析报表',
    icon: BarChartOutlined,
    path: '/reports'
  }
])

const topSales = ref([
  { product: '苹果 红富士', quantity: 156, amount: 1248 },
  { product: '香蕉', quantity: 234, amount: 1592 },
  { product: '橙子', quantity: 189, amount: 1134 },
  { product: '葡萄', quantity: 145, amount: 1450 },
  { product: '梨子', quantity: 123, amount: 984 }
])

const storeColumns = [
  { title: '门店', dataIndex: 'store', key: 'store' },
  { title: '销售额', dataIndex: 'sales', key: 'sales' },
  { title: '订单数', dataIndex: 'orders', key: 'orders' },
  { title: '客流量', dataIndex: 'traffic', key: 'traffic' },
]

const storeData = ref([
  { store: '中山路店', sales: '¥45,678', orders: 123, traffic: 567 },
  { store: '天河城店', sales: '¥38,234', orders: 98, traffic: 456 },
  { store: '珠江新城店', sales: '¥52,890', orders: 145, traffic: 678 },
])

const navigateTo = (path: string) => {
  router.push(path)
}
</script>

<style scoped>
.overview {
  padding: 24px;
}

.card-cover {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 120px;
  background: #f5f5f5;
}

.module-card {
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.module-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style>